import React, { Component } from "react";
import { Link } from "react-router-dom";
import ReactDOM from "react-dom";

const game_abouts = {
  Conway: <div className="col-12">
    <p>
      The most well-known example of a cellular automata system
      is <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">John Conway's game of Life</a>,
      a deterministic ruleset for two-dimensional grids in which cells can be alive or dead, and their
      living status at one timestep is based on their living status and total number of neighbors on
      the previous timestep.
    </p>
    <img src="/static/img/conway.gif"/>
    <p className="caption">Conway's original Game of Life</p>
    <p>
      Conway's ruleset stipulated that living cells with 2 or 3 neighbors should continue living, and dead
      cells with 3 neighbors should become alive. One can imagine the space of similar determinist rulesets -
      since grid cells can have 0 to 8 neighbors, there are 9 choices to make about when living cells stay
      alive, and 9 choices about when dead cells become alive, so that there is a total of 2<sup>18</sup> rulesets
      in this family.
    </p>
    <p>
      A further generalization is to make the rulesets probabilistic, so that a cell's number of neighbors determines
      the probability that it is alive on the next timestep. Like most of our rulesets on this site, the Conway
      rulesets we generate are "mostly deterministic" - skewed so that most generated rules specify that a cell
      with a particular number of neighbors almost always lives or almost always dies.
    </p>
    <img src="/static/img/probconway.gif"/>
    <p className="caption">An example of a probabilistic Conway ruleset generated by our model</p>
  </div>,

  RedVsBlue: <div className="col-12">
    <p>
      We developed another grid-based game we call RedVsBlue. It takes place with cells in a two-dimensional grid
      which may be alive or dead, and follow probabilistic rules for life and death identical to probabilistic
      Conway. RedVsBlue also introduces an additional color state for alive cells, which may be fully red, fully
      blue, or somewhere in between. A cell's color at a particular timestep is based on three factors - its previous
      color, the average color of its lateral (up, down, left, right) neighbors, the average color of its diagonal
      neighbors. These relationships may be positive or negative, so that colors may spread or alternate. In addition,
      there is a random influence on cell color every timestep; the original 18 rules from probabilistic Conway
      plus these four factors that determine cell color give RedVsBlue as 22-dimensional ruleset.
    </p>
  </div>,

  Rhomdos: <div className="col-12">
    <p>
      Rhombic dodecahedrons ("rhomdos") are a type of 12-sided polyhedron which tesselate 3-dimensional space, making
      them a perfect candidate for a 3D cell shape that might provide a little more interest than cubes. Tesselated
      rhomdos have 12 neighbors, and for right now our Rhomdos game works similarly to probabilistic Conway, except
      that cells have up to 12 living neighbors, and there are 26 rules correspondingly. We color the Rhomdos according
      to their position in the 3D grid, mapping 3D space to RGB space, simply so that it's easier to tell how they are
      spatially arranged.
    </p>
    <p>
      We'd like to develop more games for 3D space that have higher-dimensional continuous cell state.
    </p>
  </div>,
}

const gif_rows = {
  Conway: null,
  RedVsBlue: <div className="row gif-row">
    <div className="col-12 col-md-6">
      <img src="/static/img/bars.gif"/>
    </div>
    <div className="col-12 col-md-6">
      <img src="/static/img/drip.gif"/>
    </div>
    <div className="col-12 col-md-6">
      <img src="/static/img/grill.gif"/>
    </div>
    <div className="col-12 col-md-6">
      <img src="/static/img/solid.gif"/>
    </div>
  </div>,
  Rhomdos: <div className="row gif-row">
    <div className="col-12 col-md-6">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a1/Rhombicdodecahedron.gif"/>
      <p className="caption">
        A rhombic dodecahedron
      </p>
    </div>
    <div className="col-12 col-md-6">
      <img src="/static/img/rhomdos.gif"/>
      <p className="caption">
        An example of a Rhomdos game generated by our model
      </p>
    </div>
  </div>
}

class About extends Component {
    render() {
      return(
        <div className="container constrained about">
          <div className="row">
            <div className="col-12">
              <h3>Humans wanted!</h3>
              <Link to={"/" + this.props.game_name + "/rate"}>
                <button className="rate_button" style={{marginTop: "1vh"}}>Rate a few games!</button>
              </Link>
              <p style={{textAlign: "center"}}>
                Want to help us out? Our work is supported by volunteer image ratings, which give our machine learning
                model more data to become better!
              </p>
            </div>

            {game_abouts[this.props.game_name]}

            {gif_rows[this.props.game_name]}
          </div>
        </div>
      )

    }
}

export default About;